This FX takes advantage of Microsoft Internet Explorer 4.0 Dynamic HTML and will not work in any other browser at the time this was written.

This Dynamic HTML example will create document divisions (DIV elements) which can be shown or hidden by clicking on their headers. When properly structured, they may contain many nested levels, creating a collapseable outline in your document.

When the document is initially displayed in a browser, the user will see the content of the Default: Shown headers only. When the mouse moves over the header, the mouse cursor will change to a hand pointer, indicating that the header may be clicked on. When clicked, it will result in the hidden section, including any such nested headers, being shown, like a collapseable outline. Click again, and the section will be hidden.

There are multiple levels provided which may be nested to create the collapseable outline structure. These nested levels are created by dropping lower levels immediately before the closing DIV tag.

Because this effect relies on SPAN and DIV tags that are not visible in WYSIWYG view, it is recommended that you edit these sections in Tags On view.

You can modify both the clickable text of the headers and the hidden text to be anything that you want, by changing the content of the DIV and SPAN elements. Just make sure you leave the required HTML markup (the DIV and SPAN elements) as they are.

Directions

First, you must drag the above link (Collapse / Expand Script8) onto your document to place the necessary JavaScript in your document.

Then, you may drag as many of the "Outline Block" links as you need, replacing the content with any HTML markup you desire. There are 3 levels available:

By dropping further Header FX items immediately inside closing DIV tags, as indicated by the Comments, structured collapsable documents may be created.